<template>
  <div class="left-container">
    <div class="tabs" v-if="false">
      <div
        class="tab classroom-error"
        :class="{ active: currentTab === 1 }"
        @click="currentTab = 1"
      >
        班级错题
      </div>
      <div
        class="tab student-error"
        :class="{ active: currentTab === 2 }"
        @click="currentTab = 2"
      >
        学生错题
      </div>
    </div>
    <div class="toggle" v-if="currentTab === 1">
      <div
        class="knowledge-point sub-tab"
        :class="{ active: currentSubTab === 1 }"
        @click="currentSubTab = 1"
      >
        知识点
      </div>
      <div
        class="section sub-tab"
        :class="{ active: currentSubTab === 2 }"
        @click="currentSubTab = 2"
      >
        章节
      </div>
    </div>
    <template v-if="currentTab === 1">
      <div v-if="currentSubTab === 1" class="content">
        <el-scrollbar>
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            style="padding: 5px"
            highlight-current
          />
        </el-scrollbar>
      </div>
      <div v-if="currentSubTab === 2" class="">2</div>
    </template>
    <template v-if="currentTab === 2">
      <div class="student-list">
        <div class="header">
          <div class="title">学生列表</div>
          <div class="operate">
            <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
              >全选
            </el-checkbox>
          </div>
        </div>
        <el-scrollbar style="flex: 1">
          <div class="content">
            <el-checkbox-group
              v-model="checkedStudent"
              @change="handleCheckedStudentChange"
            >
              <el-checkbox-button
                v-for="student in studentList"
                :key="student.student_id"
                :value="student.student_id"
                :label="student.student_id"
              >
                {{ student.student_name }}
              </el-checkbox-button>
            </el-checkbox-group>
          </div>
        </el-scrollbar>
      </div>
    </template>
  </div>
</template>
<script setup>
import { ref, defineModel, watch } from 'vue'
import { postKeyPointTree } from '@/apis/target-boost'

const currentTab = defineModel('currentTab')
const currentSubTab = ref(1)

const data = ref([])

const defaultProps = {
  children: 'children',
  label: 'name'
}
// 获取知识点和章节
const getKnowledgePointsAndChapters = async () => {
  // 暂时先是初中数学
  const params = {
    class_id: '3288131861430344',
    type: 2,
    course_id: 54,
    subject_id: 2,
    stage: 2,
    start_time: 1,
    end_time: 9999999999
  }
  const res = await postKeyPointTree(JSON.stringify(params))
  console.log(res)
  if (res.data) {
    data.value = res.data.data
  }
}

watch(
  () => currentTab.value,
  async () => {
    await getKnowledgePointsAndChapters()
  },
  {
    immediate: true
  }
)

// 提取知识点树的所有id，请求需要使用
function extractIds(node) {
  let ids = []

  function traverse(node) {
    if (node.id) {
      ids.push(node.id)
    }
    if (node.children && node.children.length > 0) {
      node.children.forEach(child => traverse(child))
    }
  }

  traverse(node)
  return ids
}
// 这个会给到rightContainer组件使用
const knowledgePointList = defineModel('knowledgePointList')
const handleNodeClick = data => {
  knowledgePointList.value = extractIds(data)
  console.log(knowledgePointList.value)
}

// 学生错题
const checkAll = ref(false)
const isIndeterminate = ref(false)

const checkedStudent = defineModel('checkedStudent')
const studentList = defineModel('studentList')
// 当学生列表变化时，恢复默认状态
watch(
  () => studentList.value,
  () => {
    checkedStudent.value = studentList.value?.map(student => student.student_id)
    checkAll.value = true
    isIndeterminate.value = false
  }
)

const handleCheckAllChange = val => {
  if (val) {
    checkedStudent.value = studentList.value.map(student => student.student_id)
  } else {
    checkedStudent.value = []
  }
  isIndeterminate.value = false
}
const handleCheckedStudentChange = value => {
  // console.log(checkedStudent.value)
  const checkedCount = value.length
  checkAll.value = checkedCount === studentList.value.length
  isIndeterminate.value =
    checkedCount > 0 && checkedCount < studentList.value.length
}
</script>
<style lang="less" scoped>
.left-container {
  position: relative;
  width: 334px;
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 0 rgb(0 0 0 / 0.03);

  .tabs {
    display: flex;
    justify-content: space-between;

    .tab {
      width: 167px;
      height: 47px;
      line-height: 47px;
      text-align: center;
      background-color: #e6e8ef;
      cursor: pointer;
      color: #333;
      font-weight: 400;
      transition: all 0.2s;
    }

    .active {
      background-color: #fff;
      font-weight: 700;
      color: @theme-color;
      border-radius: 14px 14px 0 0 !important;
      transform: translateY(-9px);
    }

    .classroom-error {
      border-radius: 14px 0;
    }

    .student-error {
      border-radius: 0 14px;
    }
  }

  .toggle {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    margin-top: 20px;

    .sub-tab {
      width: 135px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
      border-radius: 4px;
      border: 1px solid @theme-color;
      color: @theme-color;
      transition: all 0.2s;
    }

    .active {
      background: @theme-color;
      color: #fff;
    }
  }

  .content {
    flex: 1;
    margin-top: 29px;
    font-size: 16px;

    :deep(.el-tree-node__content) {
      height: 45px;
      border-radius: 14px;
      margin: 5px 0;

      --el-color-primary-light-9: #e9eeff;

      &:hover {
        color: @theme-color;
        background-color: #e9eeff;
      }
    }
  }

  .student-list {
    display: flex;
    flex-direction: column;
    padding: 16px;
    height: 100%;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

    :deep(.el-checkbox-group) {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;

      .el-checkbox-button__inner {
        display: inline-block;
        width: 89px;
        height: 30px;
        line-height: 30px;
        padding: 0;
        border: none;
        border-radius: 4px;
        background-color: #f2f4f9;
        text-align: center;
        font-size: 16px;
      }

      .is-checked {
        .el-checkbox-button__inner {
          color: @theme-color;

          // &::after {
          //   content: '✔';
          //   position: absolute;
          //   top: -9px;
          //   right: 0;
          //   width: 18px;
          //   height: 18px;
          //   line-height: 18px;
          //   color: #fff;
          //   background-color: @theme-color;
          //   border-radius: 50%;
          // }
        }
      }
    }
  }
}
</style>
